<template>
    <div class="feedback-complaint">
        <!-- 投诉人 -->
        <div class="list-item after-line normal-text">
            <span class="list-item-left normal-text">投诉人</span>
            <div class="list-item-content">
                <input v-model.trim="name" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <!-- 联系电话 -->
        <div class="list-item after-line normal-text">
            <span class="list-item-left normal-text">联系电话</span>
            <div class="list-item-content">
                <input v-model.trim="mobile" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <!-- 投诉原因 -->
        <div class="list-item clearfix normal-text">
            <span class="list-item-left normal-text">投诉原因</span>
        </div>
        <div class="feedback-complaint__textarea after-line">
            <textarea v-model.trim="content" class="textarea" placeholder="点击填写"></textarea>
        </div>
        <!-- 投诉凭证 -->
        <div class="list-item normal-text">
            <span class="list-item-left normal-text">投诉凭证（选填）</span>
        </div>
        <div class="feedback-complaint__uploader">
            <Uploader v-model="images" />
        </div>

        <!-- 按钮 -->
        <div class="fixed-btn-wrap">
            <MobileButton name="white-red" class="btn-block btn-rect btn-large" @click="onClickSubmit">
                上传投诉
            </MobileButton>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import CustomNav from '@/components/nav/customNav.vue';
import Uploader from '@/components/uploader/uploader.vue';
import {
    api,
} from '@/lib/api';

import { Component, Vue } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'FeedbackComplaint',
    components: {
        CustomNav,
        Uploader,
    },
})
export default class FeedbackComplaint extends Vue {
    public name: any = '';
    public mobile: any = '';
    public content: any = '';
    public images: any = [];

    /**
     * 上传投诉
     */
    public async onClickSubmit() {
        if (!this.name) {
            wx.showToast({ title: '请填写投诉人', icon: 'none' });
            return;
        }
        if (!this.mobile) {
            wx.showToast({ title: '请填写联系电话', icon: 'none' });
            return;
        }
        if (!this.content) {
            wx.showToast({ title: '请填写投诉原因', icon: 'none' });
            return;
        }

        let uploadRes = [];
        if (this.images.length > 0) {
            wx.showLoading({
                title: '开始上传',
                mask: true,
            });
            uploadRes = await Promise.all(this.images.map((image: any) => store.dispatch('framework/upload', {
                filePath: image,
                type: 'complaint',
            })));
        } else {
            wx.showLoading({
                title: '正在提交',
                mask: true,
            });
        }

        const res = await store.dispatch('feedback/complaint', {
            name: this.name,
            mobile: this.mobile,
            content: this.content,
            images: uploadRes.map((res: any) => JSON.parse(res.data).data.key),
        });

        if (res.statusCode === 200 && res.data.status === 0) {
            wx.showToast({
                title: '提交成功',
            });

            // 重置数据
            this.name = '';
            this.mobile = '';
            this.content = '';
            this.images = [];

            // api.navigateTo({
            //     url: '/pages/feedback_complaint_result/main',
            // });
            api.push({
                name: ROUTE_NAME.FEEDBACK_COMPLAINT_RESULT,
            });
        } else {
            wx.showToast({
                title: res.data.message,
                icon: 'none',
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.feedback-complaint {
    background-color: @color-white;

    &__textarea {
        position: relative;
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        border: 0;
        vertical-align: middle;
        resize: none;
        .textarea {
            padding: 8px 15px;
        }
    }
}
</style>
